<template>
  <!-- eslint-disable -->
  <div class="new-task-list">
    <el-dialog
      title="领取新任务"
      width="70%"
      :model-value="visible"
      @input="$emit('update:visible', $event.target.value)"
      :before-close="cancel"
      class="define-el-dialog"
    >
      <div class="content">
        <div class="search-content">
          <el-input
            v-model="model.keyword"
            clearable
            placeholder="任务号/任务名称"
            :prefix-icon="Search"
            style="width: 272px; margin-right: 24px"
          />
          <el-button @click.prevent="searchdasf" type="primary">查询</el-button>
        </div>
        <div :class="disabledAll ? 'list disabled' : 'list'">
          <div
            :class="item.isActive ? 'item active' : 'item'"
            v-for="(item, index) in newTaskList"
            @click="selectClick(item, index)"
          >
            <div
              class="title-info"
              :title="`${item.id}-${item.name}${formatDateTime(item.dateTime)}`"
            >
              {{ `${item.id}-${item.name}${formatDateTime(item.dateTime)}` }}
            </div>
            <div class="item-content">
              <div class="text">{{ `样本数量：${item.totalSeriesCount}` }}</div>
              <div class="text">
                {{ `结束时间：${formatDateTime(item.taskEndDate)}` }}
              </div>
              <div class="text">{{ `项目标签：${item.label}` }}</div>
            </div>
            <div class="selected" v-show="item.isActive">
              <el-icon class="icon-check">
                <Check />
              </el-icon>
            </div>
          </div>
        </div>
        <div
          class="el-pagination-container"
          style="display: flex; justify-content: flex-end"
        >
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeArr"
            layout="prev, pager, next, sizes"
            :total="newTaskTotal"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <div class="selected-number">已选任务：{{ selectedNumber }}</div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
//@ts-noCheck
import { ref, reactive, computed, onMounted, watch } from "vue";
import _ from "lodash";
// import SysNotice from '@/components/sys-notice/index.vue';
import NavBar from "@/components/navbar/index.vue";
import { useAppStore, useUserStore } from "@/store";
import ill from "@/assets/images/ill.png";
import { Warning, Plus, Search, Check } from "@element-plus/icons-vue";
import { formatDateTime } from "@/utils/date";
import NewTaskList from "@/views/doctor/components/NewTaskList.vue";
import { Message } from "@arco-design/web-vue";

import router from "@/router";
import {
  taskSeriesSearch,
  userTaskSearch,
  taskJoinableSearch,
} from "@/api/doctor/doctor";
import {
  TaskSeriesSearchList,
  TaskSeriesSearchModel,
  UserTaskSearchList,
  UserTaskSearchModel,
} from "@/api/doctor/doctor.d";

const emit: any = defineEmits();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  currnetIds: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const max = 5;
const disabledAll = ref(false);
const newTaskList = ref<any[]>([]);
/*watch(
  newTaskList,
  () => {
    setDisabledAll();
  },
  {
    "deep": true,
  }
);*/
function setDisabledAll() {
  /*console.log(
    props.currnetIds.length,
    newTaskList.value.filter((item) => item.isActive).length
  );*/
  disabledAll.value =
    props.currnetIds.length + newTaskList.value.filter((item) => item.isActive).length >=
    max;
}
const confirm = () => {
  const list = newTaskList.value.filter((item) => item.isActive);
  const newList = _.orderBy(list, "id", "asc");
  emit("on-change", newList);
  cancel();
};
const cancel = () => {
  emit("update:visible", false);
  setTimeout(() => {
    disabledAll.value = false;
    model.keyword = "";
  }, 200);
};

/**
 * 搜索
 */
const model = reactive({
  keyword: "",
});
const searchdasf = () => {
  setTaskJoinable({
    keyword: model.keyword,
  });
};

/**
 * 列表
 */
const selectedNumber = computed(
  () => newTaskList.value.filter((item: any) => item.isActive).length
);
const selectClick = (item: any, index: number) => {
  /*if (disabledAll.value && !item.isActive) {
    return Message.warning("任务总数量最多5个");
  }*/
  newTaskList.value[index].isActive = !newTaskList.value[index].isActive;
  // setDisabledAll();
};
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      setTaskJoinable();
    }
  }
);

async function setTaskJoinable(opt?) {
  !opt && (opt = {});
  const model = {
    page: opt.page || currentPage.value,
    pageSize: opt.pageSize || pageSize.value,
    keyword: opt.keyword || "",
  };
  const res = await taskJoinableSearch(model);
  newTaskList.value = (res.data.list || []).map((item) => {
    return {
      ...item,
      isActive: false,
    };
  });
  newTaskTotal.value = res.data.total || 0;
}
/**
 * 分页
 */
const newTaskTotal = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const pageSizeArr = [3, 10, 20, 50, 100, 500];
const handleSizeChange = (size) => {
  pageSize.value = size;
  setTaskJoinable({
    pageSize: size,
    keyword: model.keyword,
  });
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  setTaskJoinable({
    page: page,
    keyword: model.keyword,
  });
};
</script>

<style lang="less">
.new-task-list {
  .content {
    width: 100%;
    max-height: 540px;
    padding: 20px 0;
    background-color: #fff;
    .selected-number {
      position: relative;
      bottom: 32px;
    }
    .search-content {
      margin-bottom: 20px;
    }
    .list {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;
      max-height: 410px;
      overflow: auto;
      .item {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        width: ~"calc(33% - 20px)";
        margin-right: 22px;
        margin-bottom: 20px;
        cursor: pointer;
        &:hover {
          .title-info {
            color: #448e97;
          }
        }
        &.active {
          border: 2px solid #448e97;
          position: relative;
          .selected {
            width: 40px;
            height: 40px;
            position: absolute;
            bottom: 2px;
            right: 2px;
            z-index: 1;
            &::after {
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 0 40px 40px;
              border-color: transparent transparent #448d97 transparent;
              position: absolute;
              bottom: 2px;
              right: 2px;
              z-index: 1;
            }
            .icon-check {
              position: absolute;
              right: 4px;
              bottom: 4px;
              z-index: 2;
              color: #fff;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
        .title-info {
          background: #fafafa;
          padding: 14px 16px;
          font-weight: 400;
          font-size: 16px;
          line-height: 21px;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-content {
          padding: 24px 16px 12px 16px;
          .text {
            margin-bottom: 12px;
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
